<template>
  <div class="share_register">
    <img class="rule_img" src="../../../assets/img/modules/share/icon_6.png" alt="" @click="showModel = true">
    <div class="title_name_gx">恭喜您获得</div>
    <strong class="share_number">
      {{$store.state.share.numberYbOld}}元助学{{$store.state.gsign === 'mhzg' ? '补贴' : '金'}}
    </strong>
    <div class="tab_number">
      {{$store.state.share.numberYbOld}}
    </div>
    <div class="tab_text">
      助学
    </div>
    <div class="ewm_img">
      <p>超过99%用户已领取</p>
      <input v-model="formData.phoneFollow" type="number" placeholder="请入您的手机号">
      <div class="item_input">
        <input type="number" v-model="formData.phoneCode" placeholder="请入短信验证码" style="margin-right: 15px;">
        <button @click="getTime" :disabled="codeText === '获取验证码'? false: true" :style="{backgroundColor: (codeText === '获取验证码'? '#F6C785': '#999999')}">{{codeText}}</button>
      </div>
      <img class="img_btn" src="../../../assets/img/modules/share/icon_7.png" alt="" @click="setPhone">
    </div>
    <!--<div class="rule_body">
      <div class="h3_title">活动规则</div>
      <ol>
        <li>活动参与人员限制：发起邀请者必需为本平台用户。</li>
        <li>助学补贴券限制：平台有条件发放给用户的用于报读减免的助学补贴券，请在助补贴券有效期内使用。</li>
      </ol>
    </div>-->
    <div class="rule_body_new">
      <img class="title_img" src="../../../assets/img/modules/share/icon_12.png" alt="">
      <div class="tab_list">
        <div class="tab_item">
          <img src="../../../assets/img/modules/share/icon_13.png" alt="">
          2.5年超短学制
        </div>
        <div class="tab_item">
          <img src="../../../assets/img/modules/share/icon_13.png" alt="">
          在线学考
        </div>
        <div class="tab_item">
          <img src="../../../assets/img/modules/share/icon_13.png" alt="">
          在职可读
        </div>
        <div class="tab_item">
          <img src="../../../assets/img/modules/share/icon_13.png" alt="">
          一站式服务
        </div>
      </div>
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
    <!--规则说明-->
    <div v-if="showModel" class="model_status_1">
      <div class="model_tab_body">
        <p>1.活动参与人员限制：必须为本平台用户。</p>
        <p>2.助学补贴券限制：平台有条件发放给用户的用于报读减免的助学补贴券，请在助学补贴券有效期内使用。</p>
        <p>3.本平台可在法律法规允许的范围内对本次活动规则解释做出适当修改。</p>
        <span>*本次活动与“苹果公司”无关</span>
        <img class="img_btn" src="../../../assets/img/modules/score/qy_10.png" alt="" @click="showModel = false">
      </div>
    </div>
  </div>
</template>
<script>
import { isMobile } from '../../../utils/validate'
import md5 from 'js-md5'
import dragLoding from '@/components/loding'
export default {
  name: 'share_register',
  components: {
    dragLoding
  },
  data () {
    return {
      showModel: false,
      showLoding: true, // 遮罩层
      serveTime: '',
      setIntervalTime: null,
      codeText: '获取验证码',
      formData: {
        phone: this.$store.state.share.phone, // 分享者手机号
        openId: this.$store.state.openid, // 微信openid
        gsign: this.$store.state.gsign, // 公众号渠道
        phoneFollow: '', // 领取人手机号
        phoneCode: '', // 验证码
        status: '' // 杨耀要偷懒  不想多查询一次数据库
      }
    }
  },
  props: {},
  watch: {
    'formData.phoneCode': function (newValue, oldValue) {
      this.formData.phoneCode = newValue.replace(/[^\d]/g, '')
      this.formData.phoneCode = newValue.substring(0, 6)
    },
    'formData.phoneFollow': function (newValue, oldValue) {
      this.formData.phoneFollow = newValue.replace(/[^\d]/g, '')
      this.formData.phoneFollow = newValue.substring(0, 11)
    }
  },
  methods: {
    /*
    *@author wf_Huang
    *@Time 2019/8/13 0013 11:51
    *@function  微信授权
    *****************************************/
    getWx () {
      var pageUrl = encodeURIComponent(window.location.href)
      window.location.href = `http://wechat.eenet.com/eeapi.php?myaction=oauth&uniacid=${this.$route.query.uniacid}&scope=base&backurl=${pageUrl}`
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/29 0029 9:33
     *@function  获取手机验证码
     *****************************************/
    getTime () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/time`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        this.serveTime = res.data
        this.getCode()
      }).catch(() => {})
    },
    getCode () {
      if (!isMobile(this.formData.phoneFollow)) {
        this.$toast('手机号格式有误')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/sentSms`,
        method: 'post',
        data: {
          phone: this.formData.phoneFollow,
          sign: md5(this.formData.phoneFollow + 'wxPhoneSms' + this.serveTime),
          time: this.serveTime
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 202) {
          this.$toast('验证码错误')
          return false
        }
        if (res.status === 203) {
          this.$toast('请勿重复发送')
          this.getCaptcha()
          return false
        }
        if (res.status !== 200) {
          this.$toast('验证码发送失败')
          return false
        }
        var _this = this
        var timeNumber = 60
        this.$toast('验证码已发送')
        this.setIntervalTime = setInterval(function () {
          _this.codeText = `${timeNumber}s重新发送`
          if (timeNumber <= 0) {
            _this.codeText = '获取验证码'
            clearInterval(_this.setIntervalTime)
          }
          timeNumber--
        }, 1000)
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/28 0028 注册手机号 */
    setPhone () {
      if (!this.formData.phoneCode) {
        this.$toast('请填写验证码')
        return false
      }
      if (!isMobile(this.formData.phoneFollow)) {
        this.$toast('手机号格式有误')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/web1.wx_user/userPhone`,
        method: 'post',
        data: this.formData,
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 205) {
          this.$toast('验证码错误')
          return false
        }
        if (res.status === 203) {
          this.$toast('手机号已领取, 更多内容关注公众号')
          let _this = this
          setTimeout(function () {
            _this.$router.push({ path: '/share-receive' })
          }, 2000)
          return false
        }
        if (res.status !== 200) {
          this.$toast('领取失败')
          return false
        }
        Promise.all([
          this.getCouponTab()
        ]).then(() => {
          this.$router.push({ path: '/share-success' })
        })
      }).catch(() => {})
    },
    // 领取
    getCouponTab () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.product/bindingPhonePolicy`,
        method: 'post',
        data: {
          policyId: window.SITE_CONFIG['policy_id'],
          phone: this.formData.phoneFollow
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('领取失败')
          return false
        }
        this.$toast('领取成功')
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/28 0028 添加粉丝量  */
    setFan () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/web1.wx_user/index`,
        method: 'post',
        data: {
          phone: this.$store.state.share.phone,
          gsign: this.$store.state.gsign,
          openId: this.$store.state.openid
        },
        withCredentials: false
      }).then(({ data: res }) => {
        // 关闭loading效果
        this.showLoding = false
        if (res.status === 204) {
          this.$router.push({ path: '/share-receive' })
          return false
        }
        if (res.status === 203) {
          this.$toast(res.message)
          return false
        }
        this.formData.status = res.status
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F64841')
    if (this.$route.query.phone) {
      this.$store.state.share.phone = this.$route.query.phone
    }
    if (this.$route.query.gsign && this.$route.query.uniacid) {
      this.$store.state.gsign = this.$route.query.gsign
      this.$store.state.uniacid = this.$route.query.uniacid
      if (this.$route.query.device) {
        this.$store.state.device = this.$route.query.device
      }
    }
    if (this.$route.query.openid) {
      this.$store.state.openid = this.$route.query.openid
      this.setFan()
    } else {
      if (this.$store.state.openid) {
        this.setFan()
      } else {
        this.getWx()
      }
    }
    // 单独判断是否是民航 民航使用884政策
    if (this.$store.state.gsign === 'mhzg') {
      window.SITE_CONFIG['policy_id'] = 884
      // 处理不同的显示金额
      this.$store.state.share.numberYb = 300
      this.$store.state.share.numberYbOld = 500
    } else {
      // 处理不同的显示金额
      this.$store.state.share.numberYb = 200
      this.$store.state.share.numberYbOld = 100
    }
    localStorage.setItem('stateData', JSON.stringify(this.$store.state))
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .share_register {
    max-width: 750px;
    margin: 0 auto 180px;
    background: url("../../../assets/img/modules/share/icon_2.png") no-repeat center;
    background-size: 100% 100%;
    width: 750px;
    height: 1283px;
    position: relative;
    .model_status_1{
      background-color: rgba(0,0,0,0.8);
      position: fixed;
      z-index: 99;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      .model_tab_body{
        width: 580px;
        position: absolute;
        top: 45%;
        left: 50%;
        border-radius: 4px;
        background: #ffffff;
        transform: translate(-50%, -50%);
        padding: 40px 40px;
        p{
          font-size: 28px;
          color: #666666;
          line-height: 35px;
          padding-top: 30px;
          margin: 0 ;
          text-indent: 30px;
        }
        span{
          font-size: 26px;
          color: #FCB267;
          display: block;
          margin: 20px 0;
        }
        .img_btn{
          width: 64px;
          height: 64px;
          position: absolute;
          bottom: -120px;
          left: calc(50% - 32px);
        }
      }
    }
    .rule_img{
      width: 172px;
      height: 54px;
      position: absolute;
      right: 0;
      z-index: 9;
      top: 50px;
    }
    .title_name_gx{
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      font-size: 46px;
      color: #FDF2C0;
      text-align: center;
    }
    .share_number{
      position: absolute;
      top: 120px;
      left: 0;
      right: 0;
      font-size: 90px;
      letter-spacing: 5px;
      color: #ffffff;
      text-align: center;
    }
    .tab_number{
      position: absolute;
      top: 420px;
      left: 180px;
      right: 0;
      font-size: 150px;
      transform: rotate(-5deg);
      color: #DDC29D;
    }
    .tab_text{
      position: absolute;
      top: 430px;
      left: 510px;
      width: 50px;
      right: 0;
      font-size: 60px;
      transform: rotate(-5deg);
      color: #DDC29D;
    }
    .ewm_img{
      position: absolute;
      width: 540px;
      height: 440px;
      top: 890px;
      left: 50%;
      transform: translate(-50%, -50%);
      p{
        font-size: 26px;
        color: #FFFFFF;
        text-align: center;
        margin: 0;
      }
      input{
        background: #FFFFFF;
        border-radius: 12px;
        width: 540px;
        height: 86px;
        font-size: 30px;
        padding: 0 25px;
        border: 0;
        &::placeholder{
          color: #C8C8C8;
        }
      }
      .item_input{
        display: flex;
        margin: 40px 0;
        input{
          width: calc(100% - 224px);
        }
        button{
          width: 200px;
          min-width: 200px;
          height: 86px;
          background: #F6C785;
          border-radius: 12px;
          font-size: 24px;
          color: #FFFFFF;
          border: 0;
          padding: 0;
          display: block;
        }
      }
      .img_btn{
        width: 558px;
        height: 118px;
        margin-left: -7px;
      }
    }
    .rule_body{
      position: absolute;
      top: 1200px;
      left: 80px;
      right: 60px;
      padding-bottom: 50px;
      .h3_title{
        font-size: 30px;
        color: #FFFFFF;
        position: relative;
        width: 150px;
        margin: 0 auto 10px;
        text-align: center;
        &:after{
          content: '';
          position: absolute;
          background: url("../../../assets/img/modules/share/icon_10.png") no-repeat center;
          background-size: 24px 24px;
          width: 24px;
          height: 24px;
          left: -30px;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        &:before{
          content: '';
          position: absolute;
          background: url("../../../assets/img/modules/share/icon_10.png") no-repeat center;
          background-size: 24px 24px;
          width: 24px;
          height: 24px;
          right: -50px;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      ol{
        list-style-type: decimal;
        li{
          font-size: 26px;
          color: #FFFFFF;
          margin-top: 15px;
          line-height: 34px;
        }
      }
    }
    .rule_body_new{
      position: absolute;
      top: 1200px;
      left: 80px;
      right: 60px;
      padding-bottom: 50px;
      .title_img{
        width: 582px;
        height: 33px;
        display: block;
        margin: 30px auto;
      }
      .tab_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .tab_item{
          width: 50%;
          display: flex;
          font-size: 30px;
          color: #FFFFFF;
          align-items: center;
          margin: 10px 0;
          &:nth-child(2){
            padding-left: 80px;
          }
          &:nth-child(4){
            padding-left: 80px;
          }
          img{
            width: 37px;
            height: 37px;
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
